<template>
  <view>
    <view class="daynav">
      <view class="daytime" v-for="(item, index) in daylist" :key="index" @click="changebg(index, item)"
        :class="inbg == index ? 'bg4' : ''">
        <view class="week" v-if="index == 0">今天</view>
        <view class="week" v-else-if="index == 1">明天</view>
        <view class="week" v-else>{{ item.week }}</view>
        <view class="day">{{ item.day }}</view>
      </view>
    </view>
    <view class="Venuebox">
      <scroll-view :scroll-top="scrollTop" scroll-y="true">
        <view class="scroll-Y" :style="{ 'padding-bottom': showCh ? '44rpx' : '' }">
          <view class="Venueleft">
            <view class="noneBox">时间段</view>
            <view class="time" v-for="(item, index) in timeScale" :key="index">
              {{ item }}
            </view>
          </view>
          <view class="Venuerigth">
            <scroll-view scroll-x="true">
              <view class="scroll-X">
                <view class="placebox" v-for="(item) in fieldList" :key="item.ID">
                  <view class="name">{{ item.RoomName }}</view>
                  <view class="cost" v-for="(vlaue) in item.TimeCells" :key="vlaue.TimeRangeID"
                    @click="chooseField(vlaue, item.RoomName)"
                    :class="vlaue.Type == 1 ? 'fullVenue' : judeStr(vlaue.TimeRangeID) ? 'venuebg' : ''">{{
                      vlaue.Type == 1 ? '约满' : '￥' + vlaue.Price }}</view>
                </view>
              </view>

            </scroll-view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="bottombox">
      <view v-show="showCh">
        <view class="choiceVenue_1">
          <view class="venuesrue">已选场次({{ chooseList.length }})</view>
          <view class="choiceBox">
            <view class="choicelist">
              <view class="chocont" v-for="(item, index) in chooseList" :key="item.ID">
                <!-- <view class="chotime">{{ item.TimeStart + '-' + item.TimeEnd }}</view>
                <view class="choname">{{ item.RoomName }}</view> -->
                <view class="chotime">{{ item.OrderDate }}</view>
                <view class="choname">{{ item.RoomName + ' ' + item.TimeStart + '-' + item.TimeEnd }}</view>
                <image class="choimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711589838636258.png"
                  mode="widthFix" @click="delField(index)"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="!showCh">
        <view class="choiceVenue">
          <view class="state_1">
            <view class="fangk_1"></view>
            <view class="venuetext">可预订</view>
          </view>
          <view class="state_1">
            <view class="fangk_2"></view>
            <view class="venuetext">已约满</view>
          </view>
          <view class="state_1">
            <view class="fangk_3"></view>
            <view class="venuetext">我的选择</view>
          </view>
        </view>
      </view>

      <view class="balancebox">
        <view class="sum">{{ '￥' + allPrice }}</view>
        <view class="balancebutton" @click="gotofielddetails">{{ allPrice > 0 ? '提交预定' : '请选择场地' }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import moskList from './costList'
export default {
  components: {},
  data() {
    return {
      inbg: 0,
      isVenue: 0,
      BarTitle: "",
      nowday: "",
      daylist: [],
      Timeperiod: [],
      timeScale: [],
      costlist: 14,
      summoney: 0,  //总价格
      fieldList: [],//场地二维数组
      chooseList: [],//选中的数组
    };
  },
  computed: {
    allPrice() {
      let num = 0
      for (let i = 0; i < this.chooseList.length; i++) {
        num = num + Number(this.chooseList[i].Price)
      }
      return num
    },
    showCh() {
      return this.chooseList.length > 0
    },
  },
  onLoad(e) {
    this.BarTitle = e.name;
    // this.shopId = e.id
    this.shopId = e.id
    this.inbg = e?.inbg || 0
    let nowtime = new Date();
    if(e.day){
      this.nowday = e.day
    }else{
      this.nowday = this.$util.unixDatetime(nowtime, "yy-mm-dd")
    }
   
    uni.setNavigationBarTitle({
      title: this.BarTitle,
      success: function () { },
      fail: function (err) { },
    });
    this.getday();
    this.getTimeScaleList();
    this.getListDetail()
  },
  methods: {
    //获取场地列表
    async getListDetail() {
      this.$pv.load('加载中', 0)
      await this.$api.post('/ShopOrder/GetShopTimeLayout', {
        ShopID: this.shopId,
        OrderDate: this.nowday
      }).then(res => {
        const { code, data, message } = res
        if (code == 0) {
          this.fieldList = data || []
        }
      }).finally(() => {
        this.$pv.closeLoad();
      })


      // this.fieldList =  this.inbg==0? moskList.list:moskList.list2
    },
    //提交订单
    gotofielddetails() {
      if (this.allPrice > 0) {
        let listJson = JSON.stringify(this.chooseList)
        console.log(listJson,'listJson');
        this.$store.commit('setorder', listJson);
        this.redirect_to('/pages/ball/field_details?name='+this.BarTitle+'&shopId='+this.shopId)
      } else {
        this.$pv.msg('请先选择场地')
      }


    },
    //点击选择/取消场地
    async chooseField(e, name) {
      if (e.Type != 1) {
        const id = e.TimeRangeID
        const hasValue = this.judeStr(id)
        // 判断选中的数组中是否存在该id，如果存在就删除，不存在就增加
        if (hasValue) {
          this.chooseList = this.chooseList.filter(item => item.TimeRangeID != id)
        } else {
          e.TimeStart = this.strReplace(e.TimeStart)
          e.TimeEnd = this.strReplace(e.TimeEnd)
          const data = {
            ...e,
            RoomName: name,
            OrderDate: this.nowday,
            week: this.daylist[this.inbg].week 
          }
          this.chooseList.push(data)
        }

      }
    },
    // 判断该字符串在数组中是否存在
    judeStr(e) {
      let result = this.chooseList.find(item => { return (item.TimeRangeID == e && item.OrderDate == this.nowday) });
      const hasID = result ? true : false
      return hasID

    },
    //删除已选中场地
    delField(index) {
      this.chooseList.splice(index, 1)
    },
    changebg(index, e) {
      this.inbg = index;
      this.nowday = e.year
      this.getListDetail()
    },
    //日期判断
    async getday() {

      for (let i = 0; i < 6; i++) {
        let nowtime = new Date();
        let time = nowtime.setDate(nowtime.getDate() + i);
        this.daylist.push({
          year: this.$util.unixDatetime(time, "yy-mm-dd"),
          day: this.$util.unixDatetime(time, "mm-dd"),
          week: this.getWeek(time),
        });
      }
      // this.nowday = this.$util.unixDatetime(nowtime,'mm-dd')
      // console.log(this.nowday,'this.nowday',nowtime.setDate(nowtime.getDate()+1));
    },

    getWeek(l) {
      let d = new Date(l);
      let week = d.getDay();
      let weekList = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      return weekList[week];
    },
    // 获取时间刻度
    async getTimeScaleList() {
      let res = await this.$api.post('/ShopOrder/GetShopTimeRange', {
        ShopID: this.shopId,
        OrderDate: this.nowday
      })
      const { code, data, message } = res
      if (code == 0) {
        for (let i = 0; i < data.length; i++) {
          if (i == 0) {
            this.timeScale.push(this.strReplace(data[i].TimeStart))
          }
          this.timeScale.push(this.strReplace(data[i].TimeEnd))
        }
      }
    },
    // 替换-为:
    strReplace(str) {
      return str.replace('-', ':')
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6;
}

.daynav {
  width: 100%;
  height: 144rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow-x: auto;
  .bg4 {
    background-color: #706eee !important;

    view {
      color: #fff !important;
    }
  }

  .daytime {
    min-width: 96rpx;
    height: 96rpx;
    border-radius: 8rpx;
    background-color: #f4f4fb;
    margin-left: 24rpx;
    text-align: center;
    transition: 0.3s all;

    .day {
      color: #706eee;
      font-weight: 600;
      font-size: 28rpx;
    }

    .week {
      color: #706eee;
      font-size: 24rpx;
      margin-top: 4rpx;
      margin-bottom: 8rpx;
    }
  }
}

.Venuebox {
  width: 100%;
  display: flex;
  height: 1036rpx;

  .scroll-Y {
    display: flex;
  }

  .Venueleft {
    margin-left: 32rpx;
    margin-top: 24rpx;
    width: 200rpx;
    text-align: center;

    .noneBox {
      font-size: 24rpx;
      color: #333333;
      margin-bottom: 16rpx;
      opacity: 0;
    }

    .time {
      border: 1rpx solid transparent;
      height: 72rpx;
      margin-bottom: 8rpx;
      font-size: 24rpx;
      color: #333333;
      transform: translateY(-20rpx);
    }
  }

  .scroll-X {
    display: flex;
  }

  .Venuerigth {
    width: 600rpx;
    display: flex;

    .placebox {
      margin-top: 24rpx;
      // margin-right: 8rpx;
      padding-right: 8rpx;
      text-align: center;

      .name {
        font-size: 24rpx;
        color: #333333;
        margin-bottom: 16rpx;
        font-weight: bold;
      }

      .cost {
        width: 116rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 8rpx;
        border: 1rpx solid #706eee;
        background-color: #ffffff;
        margin-bottom: 8rpx;
        transition: 0.5s all;
      }

      .venuebg {
        background-color: #706EEE !important;
        color: #fff !important;
      }

      .fullVenue {
        background-color: #E6E6E6 !important;
        color: #999999 !important;
        border: 1rpx solid transparent;
      }
    }
  }
}

.bottombox {
  width: 100%;
  // height: 276rpx;
  padding-bottom: 44rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;

  .choiceVenue_1 {
    // display: flex;
    // align-items: center;
    width: 100%;
    height: 154rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .venuesrue {
      font-size: 24rpx;
      color: #999999;
      margin-left: 24rpx;
      margin-bottom: 8rpx;
    }

    .choiceBox {
      width: 100%;
      overflow-y: auto;
    }

    .choicelist {
      display: flex;
      width: fit-content;
      padding: 0 12rpx;

      .chocont {
        // width: 314rpx;
        width: max-content;
        height: 104rpx;
        border-radius: 8rpx;
        background-color: #f6f6f6;
        margin: 0 12rpx;
        // text-align: center;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 60rpx;

        .chotime {
          margin-top: 4rpx;
          margin-left: 12rpx;
          font-size: 24rpx;
          color: #333333;
        }

        .choname {
          font-size: 24rpx;
          margin-left: 12rpx;
          color: #333333;
        }

        .choimg {
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          top: 50%;
          right: 12rpx;
          transform: translateY(-50%);
        }
      }
    }
  }

  .choiceVenue {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    height: 80rpx;

    .state_1 {
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .fangk_1 {
        width: 44rpx;
        height: 32rpx;
        border-radius: 4rpx;
        border: 1rpx solid #706EEE;
        background-color: #fff;
      }

      .fangk_2 {
        width: 44rpx;
        height: 32rpx;
        border-radius: 4rpx;
        background-color: #E6E6E6;
      }

      .fangk_3 {
        width: 44rpx;
        height: 32rpx;
        border-radius: 4rpx;
        background-color: #706EEE;
      }

      .venuetext {
        font-size: 22rpx;
        color: #666666;
        margin-left: 8rpx;
      }
    }
  }

  .balancebox {
    display: flex;
    border-top: 1rpx solid #E4E4E4;
    height: 128rpx;
    align-items: center;
    justify-content: space-between;

    .sum {
      font-size: 56rpx;
      color: #F9504B;
      margin-left: 32rpx;
    }

    .balancebutton {
      width: 256rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 44rpx;
      background-color: #706EEE;
      color: #fff;
      font-size: 32rpx;
      margin-right: 32rpx;

    }
  }
}
</style>
